<template>
  <div>
    根组件
    <hello-world :islogin="islogin" :list="list"></hello-world>
    <my-com @sendId="getid" @sendMoney="getMoney"></my-com>
    {{}}
    <home></home>
    <setuo-async></setuo-async>
  </div>
</template>

<!-- <script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    return {};
  },
  components: {},
};
</script> -->

<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
import MyCom from "@/components/MyCom.vue";
import home from "@/components/home/OneView.vue";
import setuoAsync from "@/components/setuoAsync.vue";
import { ref, reactive } from "vue";
// 自定义组件
// 1、创建根组件 ./src/components/XXX.vue
// 2、导入组件并使用

// 2、组件传参：
// 1、父传子
//       1、在父组件的自组加标签里绑定自定义属性，值就是要传递的数据
//       2、崽子组件里defineProps接受数据并使用
//       案例需求：父组件的islogin传给HelloWorld组件
// 2、子传父
//       1、子组件通过defineEmit获取emit，事件发射器
//       2、通过emit发送自定义事件，emit(自定义事件名，要穿的数据)
// 3、ref属性获取DOM节点
//          ref属性获取组件实例，可以访问组件实例用defineExpose暴露出来的数据和方法
// 4、非父子组件通信,类似于vue2中的的发布订阅
// vue3使用的是mitt插件
//   实现步骤:
//          1、下载npm i mitt
//          2、创建scr/utils/bus.js
//          3、订阅方(接收数据的组件)  订阅消息 bus.on()
//          4、发布方(传递数据的组件)  发布消息 bus.emit()   先订阅在发布
//     要求：myCom组件向HelloWorld组件传递数据
let islogin = ref(false);
let list = reactive([1, 2, 3, 4, 5, 6]);
console.log(islogin);

function getid(val) {
  console.log(val);
}
function getMoney(money){
  console.log(money);
}
</script>

<style></style>
